<template>
<div id='app'>
  <top-componnet :head="title" style="margin-top: 1rem;text-align: center;margin-right: 20px;"></top-componnet>
  <phone-component style="margin-top: 4rem;"></phone-component>
  <code-component></code-component>
  <!-- 新密码 -->
  <password-component ref="message" :placeholder="newPlaceholder" :pwdTitle="newTitle"></password-component>
  <!-- 确认密码 -->
  <password-component ref="message1" :placeholder="surePlaceholder" :pwdTitle="sureTitle"></password-component>
  <div class="ALTER">
    <el-button type="warning" round @click="Alter">提交</el-button><br>
  </div>
</div>
</template>

<script>
import TopComponnet from '@/components/Login/subComponent/top.vue'
import PhoneComponent from '@/components/Login/subComponent/Phone.vue'
import CodeComponent from '@/components/Login/subComponent/Code.vue'
import PasswordComponent from '@/components/Login/subComponent/Password.vue'
export default {
  data () {
    return {
      title: '修改密码',
      newTitle: '新密码',
      newPlaceholder: '6-20字符，请设置您的新密码',
      sureTitle: '确认密码',
      surePlaceholder: '请再次确认您的密码'
    }
  },
  methods: {
    Alter () {
      let password1 = this.$refs.message.input
      let password2 = this.$refs.message1.input
      if (password1 === password2) {
        console.log('两次密码相同')
      } else {
        alert('两次密码不相同')
      }
    }
  },
  components: {
    TopComponnet,
    PhoneComponent,
    CodeComponent,
    PasswordComponent
  }
}
</script>

<style lang='scss' scoped>
.ALTER {
  text-align: center;
  button {
    margin-top: 40px;
    width: 60%;
    margin-bottom: 20px;
    background: #E9BD8A;
  }
}
</style>
